<template>
  <div
    style="
      width: 93%;
      float: center;
      border: 0px solid #f00;
      margin-left: 3%;
      margin-top: 1%;
      height: auto;
      background-color: rgb(248, 248, 248);
    "
  >
    <!-- 基本信息 -->
    <div id="table1" style="width: 100%">
      <div
        style="
          width: 100%;
          border: 0px solid #f00;
          margin-top: 0.5%;
          border-radius: 25px;
          background-color: rgb(248, 248, 248);
        "
      >
        <div style="width: 100%; margin-left: 1%">
          <div style="width: 100%"></div>
          <div
            style="
              width: 100%;
              height: 40px;
              border-bottom: 2px solid rgb(130, 185, 222);
              margin-bottom: 20px;
            "
          >
            <span class="fontStyle" style="padding-top: 100px">基本信息</span>
          </div>
          <el-form
            :model="form"
            status-icon
            label-width="130px"
            :label-position="left"
            class="demo-ruleForm"
            ref="refForm"
          >
            <el-row class="row_Css">
              <el-col :span="24">
                <el-form-item label="项目名称" prop="proName">
                  <el-input
                    v-model="form.proName"
                    size="mini"
                    placeholder=""
                    style="width: 96%"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="row_Css">
              <el-col :span="12">
                <el-form-item label="规划期限" prop="decDeadline">
                  <el-date-picker
                    v-model="form.decDeadline"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                    size="mini"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12" style="margin-left: -330px">
                <el-form-item label="项目期限" prop="startTime">
                  <div class="block">
                    <el-date-picker
                      v-model="form.startTime"
                      type="year"
                      value-format="yyyy-MM-dd"
                      style="width: 160px; margin-right: 10px"
                      size="mini"
                    >
                    </el-date-picker
                    >&nbsp;&nbsp;—&nbsp;&nbsp;
                    <el-date-picker
                      v-model="form.endTime"
                      type="year"
                      value-format="yyyy-MM-dd"
                      style="width: 160px; margin-left: 10px"
                      size="mini"
                    >
                    </el-date-picker>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row class="row_Css">
              <el-col :span="24">
                <el-form-item label="建设地址" prop="address">
                  <el-input
                    size="mini"
                    v-model="form.address"
                    placeholder=""
                    style="width: 96%"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="row_Css">
              <el-col :span="12">
                <el-form-item label="建设性质" prop="buildNature">
                  <div
                    class="input_css"
                    style="width: 90%; height: 30px; border-radius: 3px"
                  >
                    &nbsp;
                    <el-radio-group
                      v-model="form.buildNature"
                      size="mini"
                      style="
                        display: flex;
                        justify-content: space-around;
                        align-items: center;
                        height: 30px;
                      "
                    >
                      <el-radio :label="1">新建</el-radio>
                      <el-radio :label="2">续建</el-radio>
                      <el-radio :label="3">改建</el-radio>
                    </el-radio-group>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="row_Css">
              <el-col :span="12">
                <el-form-item label="项目类别1" prop="proTypeOne">
                  <div class="input_css" style="width: 58%">
                    &nbsp;
                    <el-radio-group
                      v-model="form.proTypeOne"
                      style="
                        display: flex;
                        justify-content: space-around;
                        align-items: center;
                        height: 30px;
                      "
                    >
                      <el-radio :label="1">当年新增重大项目</el-radio>
                      <el-radio :label="2">其他项目</el-radio>
                    </el-radio-group>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="一级行业类别" prop="oneTradeType">
                  <el-select
                    size="mini"
                    v-model="form.oneTradeType"
                    @change="oneOptions"
                  >
                    <el-option
                      v-for="item in options1"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="row_Css">
              <el-col :span="12">
                <el-form-item label="项目类别2" prop="proTypeTwo">
                  <div class="input_css" style="width: 58%">
                    &nbsp;
                    <el-radio-group
                      v-model="form.proTypeTwo"
                      style="
                        display: flex;
                        justify-content: space-around;
                        align-items: center;
                        height: 30px;
                      "
                    >
                      <el-radio :label="1">实施类</el-radio>
                      <el-radio :label="2">争取实施类</el-radio>
                    </el-radio-group>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="二级行业类别" prop="twoTradeType">
                  <el-select size="mini" v-model="form.twoTradeType">
                    <el-option
                      v-for="item in options2"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="row_Css">
              <el-col :span="24">
                <el-form-item label="建设规模及内容" prop="buildContent">
                  <el-input
                    v-model="form.buildContent"
                    placeholder=""
                    style="width: 96%"
                    autosize
                    type="textarea"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="row_Css">
              <el-col :span="24">
                <el-form-item label="项目实施依据" prop="proBasis">
                  <el-input
                    v-model="form.proBasis"
                    placeholder=""
                    style="width: 96%"
                    autosize
                    type="textarea"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="row_Css">
              <el-col :span="24">
                <el-form-item label="项目实施必要性" prop="proMust">
                  <el-input
                    v-model="form.proMust"
                    placeholder=""
                    style="width: 96%"
                    autosize
                    type="textarea"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="row_Css">
              <el-col :span="24">
                <el-form-item label="社会效益和经济效益分析" prop="society">
                  <el-input
                    v-model="form.society"
                    style="width: 96%"
                    autosize
                    type="textarea"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="row_Css">
              <el-col :span="24">
                <el-form-item label="目前进展情况" prop="theProgress">
                  <el-input
                    v-model="form.theProgress"
                    style="width: 96%"
                    autosize
                    type="textarea"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <br />
      <!-- 投资信息 -->
      <div
        style="border: 0px solid #f00; margin-top: 0.5%; border-radius: 25px"
      >
        <div style="width: 98%; margin-left: 1%">
          <div style="width: 98%; height: 12px"></div>
          <div
            style="
              width: 100%;
              height: 40px;
              border-bottom: 2px solid rgb(130, 185, 222);
              margin-bottom: 20px;
            "
          >
            <span class="fontStyle" style="padding-top: 100px">投资信息</span>
          </div>
          <el-form
            :model="form"
            status-icon
            label-width="130px"
            :label-position="left"
            class="demo-ruleForm"
            ref="refForm2"
          >
            <el-row class="row_Css">
              <el-col :span="24">
                <el-form-item label="当前所属阶段" prop="stage">
                  <el-select size="mini" v-model="form.stage">
                    <el-option
                      v-for="item in optiondq"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="row_Css">
              <el-col :span="12">
                <el-form-item label="规划总投资" prop="totalInvest">
                  <el-input
                    v-model="form.totalInvest"
                    oninput="value=value.replace(/[^\d.]/g,'')"
                    style="width: 20%"
                    @blur="onInputBlur"
                    size="mini"
                  ></el-input
                  >&nbsp;亿元
                </el-form-item>
              </el-col>
              <el-col :span="12" style="margin-left: -450px">
                <el-form-item prop="lastInvest">
                  <div style="width:100%  display: flex;align-items: center;">
                    <span style="margin-right: 10px"
                      >截至上一规划期未完成投资</span
                    >
                    <el-input
                      v-model="form.lastInvest"
                      oninput="value=value.replace(/[^\d.]/g,'')"
                      style="width: 28%"
                      size="mini"
                    ></el-input
                    >&nbsp;亿元
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="row_Css">
              <el-col :span="24">
                <el-form-item label="十四五计划投资" prop="proName111">
                  <div
                    style="
                      height: 100%;
                      width: 96%;
                      border: 1px solid #2e8ccc;
                      border-radius: 5px;
                      background: #ffffff;
                    "
                  >
                    <table style="width: 100%" border="0px">
                      <tr align="center">
                        <th style="width: 8%">市财政</th>
                        <th>
                          <el-input
                            v-model="form.city"
                            oninput="value=value.replace(/[^\d.]/g,'')"
                            style="width: 70%"
                            @blur="onInputBlur"
                            size="mini"
                          ></el-input
                          >&nbsp;亿元
                        </th>
                        <th>公司融资</th>
                        <th>
                          <el-input
                            v-model="form.companyFinancing"
                            oninput="value=value.replace(/[^\d.]/g,'')"
                            style="width: 82%"
                            @blur="onInputBlur"
                            size="mini"
                            ref="form"
                          ></el-input
                          >&nbsp;亿元
                        </th>
                        <th>争取市级以上补助</th>
                        <th>
                          <el-input
                            v-model="form.subsidy"
                            oninput="value=value.replace(/[^\d.]/g,'')"
                            style="width: 82%"
                            @blur="onInputBlur"
                            size="mini"
                          ></el-input
                          >&nbsp;亿元
                        </th>
                      </tr>
                      <tr align="center">
                        <td>乡镇街道财政</td>
                        <td>
                          <el-input
                            v-model="form.townFinance"
                            oninput="value=value.replace(/[^\d.]/g,'')"
                            style="width: 70%"
                            @blur="onInputBlur"
                            size="mini"
                          ></el-input
                          >&nbsp;亿元
                        </td>
                        <th>乡镇街道融资</th>
                        <th>
                          <el-input
                            v-model="form.townFinancing"
                            oninput="value=value.replace(/[^\d.]/g,'')"
                            style="width: 82%"
                            @blur="onInputBlur"
                            size="mini"
                          ></el-input
                          >&nbsp;亿元
                        </th>
                        <th>其他</th>
                        <th>
                          <el-input
                            v-model="form.other"
                            oninput="value=value.replace(/[^\d.]/g,'')"
                            style="width: 82%"
                            @blur="onInputBlur"
                            size="mini"
                          ></el-input
                          >&nbsp;亿元
                        </th>
                      </tr>

                      <tr align="center">
                        <td>总计</td>
                        <td>
                          <el-input
                            v-model="form.totalInvestment"
                            oninput="value=value.replace(/[^\d.]/g,'')"
                            style="width: 70%"
                            text-align="middle"
                            @blur="onInputBlur"
                            size="mini"
                          ></el-input
                          >&nbsp;亿元
                        </td>
                      </tr>
                    </table>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="row_Css">
              <el-col :span="24">
                <el-form-item label="（投资）备注" prop="investRemark">
                  <el-input
                    v-model="form.investRemark"
                    placeholder=""
                    style="width: 96%"
                    autosize
                    type="textarea"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="row_Css">
              <el-col :span="24">
                <el-form-item label="技术前期单位" prop="earlyUnit">
                  <el-input
                    size="mini"
                    v-model="form.earlyUnit"
                    placeholder=""
                    style="width: 91%"
                  >
                  </el-input>
                  &nbsp;
                  <el-button size="mini" type="primary">选择</el-button>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="row_Css">
              <el-col :span="24">
                <el-form-item label="征迁责任单位" prop="dutyUnit">
                  <el-input
                    size="mini"
                    v-model="form.dutyUnit"
                    style="width: 91%"
                  ></el-input>
                  &nbsp;
                  <el-button size="mini" type="primary">选择</el-button>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="row_Css">
              <el-col :span="24">
                <el-form-item label="实施单位" prop="buildUnit">
                  <el-input
                    size="mini"
                    v-model="form.buildUnit"
                    style="width: 91%"
                  ></el-input>
                  &nbsp;
                  <el-button size="mini" type="primary">选择</el-button>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="row_Css">
              <el-col :span="8">
                <el-form-item label="实施单位分管领导" prop="impUnitLead">
                  <el-input
                    size="mini"
                    v-model="form.impUnitLead"
                    style="width: 40%"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="实施单位联系人" prop="impUnitPerson">
                  <el-input
                    size="mini"
                    v-model="form.impUnitPerson"
                    style="width: 40%"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item prop="impUnitPhone">
                  <div>
                    <span style="margin-right: 40px">实施单位联系人电话</span>
                    <el-input
                      v-model="form.impUnitPhone"
                      oninput="value=value.replace(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$),'')"
                      style="width: 42.5%"
                      size="mini"
                    ></el-input>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="row_Css">
              <el-col :span="24">
                <el-form-item label="申报单位" prop="decUnit">
                  <el-input
                    size="mini"
                    v-model="form.decUnit"
                    style="width: 91%"
                  ></el-input>
                  &nbsp;
                  <el-button size="mini" type="primary">选择</el-button>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row class="row_Css">
              <el-col :span="8">
                <el-form-item label="申报单位联系人" prop="decUnitPerson">
                  <el-input
                    size="mini"
                    v-model="form.decUnitPerson"
                    style="width: 40%"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item prop="decUnitPhone">
                  <div>
                    <span style="margin-right: 40px">申报单位联系人电话</span>
                    <el-input
                      size="mini"
                      v-model="form.decUnitPhone"
                      style="width: 50%"
                    ></el-input>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <!-- 土地信息 -->
      <div style="border: 0px solid #f00; border-radius: 25px">
        <div style="width: 98%; margin-left: 1%">
          <div style="width: 98%; height: 12px"></div>
          <div
            style="
              width: 100%;
              height: 40px;
              border-bottom: 2px solid rgb(130, 185, 222);
              margin-bottom: 20px;
            "
          >
            <span class="fontStyle" style="padding-top: 100px">土地信息</span>
          </div>
          <el-form
            :model="form"
            status-icon
            label-width="130px"
            :label-position="left"
            class="demo-ruleForm"
            ref="refForm3"
          >
            <el-row class="row_Css">
              <el-form-item label="项目总用地" prop="proTotalLand">
                <el-input
                  v-model="form.proTotalLand"
                  oninput="value=value.replace(/[^\d.]/g,'')"
                  @blur="onInputBlurland"
                  style="width: 10%"
                  size="mini"
                ></el-input
                >&nbsp;亩
              </el-form-item>
            </el-row>
            <el-row class="row_Css">
              <el-col :span="24">
                <el-form-item label="十四五计划新增用地" prop="11111">
                  <div
                    style="
                      height: 100%;
                      width: 96%;
                      border: 1px solid #2e8ccc;
                      border-radius: 5px;
                      background: #ffffff;
                    "
                  >
                    <table
                      style="width: 100% box-sizing:border-box;padding-left:30px;"
                      border="0px"
                    >
                      <tr align="left">
                        <th style="width: 8%">建设用地</th>
                        <th>
                          <el-input
                            v-model="form.buildLand"
                            oninput="value=value.replace(/[^\d]/g,'')"
                            style="width: 70%"
                            @blur="onInputBlurland"
                            size="mini"
                          ></el-input
                          >&nbsp;亩
                        </th>

                        <th>未利用地</th>
                        <th>
                          <el-input
                            v-model="form.unusedLand"
                            oninput="value=value.replace(/[^\d]/g,'')"
                            style="width: 82%"
                            @blur="onInputBlurland"
                            size="mini"
                          ></el-input
                          >&nbsp;亩
                        </th>
                        <th>圈外用地</th>
                        <th>
                          <el-input
                            v-model="form.ringLand"
                            oninput="value=value.replace(/[^\d]/g,'')"
                            style="width: 82%"
                            @blur="onInputBlurland"
                            size="mini"
                          ></el-input
                          >&nbsp;亩
                        </th>
                      </tr>
                      <tr align="left">
                        <td>允许建设区农用地</td>
                        <td>
                          <el-input
                            v-model="form.agrLand"
                            oninput="value=value.replace(/[^\d]/g,'')"
                            style="width: 70%"
                            @blur="onInputBlurland"
                            size="mini"
                          ></el-input
                          >&nbsp;亩
                        </td>
                        <th>有条件建设区农用地</th>
                        <th>
                          <el-input
                            v-model="form.conAgtLand"
                            oninput="value=value.replace(/[^\d]/g,'')"
                            style="width: 82%"
                            @blur="onInputBlurland"
                            size="mini"
                          ></el-input
                          >&nbsp;亩
                        </th>
                      </tr>
                      <tr align="left">
                        <td>其中耕地数</td>
                        <td>
                          <el-input
                            v-model="form.arableLand"
                            style="width: 70%"
                            text-align="middle"
                            oninput="value=value.replace(/[^\d]/g,'')"
                            @blur="onInputBlurland"
                            size="mini"
                          ></el-input
                          >&nbsp;亩
                        </td>
                        <td>总计</td>

                        <td>
                          <el-input
                            v-model="form.totalLand"
                            style="width: 82%"
                            text-align="middle"
                            @blur="onInputBlurland"
                            oninput="value=value.replace(/[^\d]/g,'')"
                            size="mini"
                          ></el-input
                          >&nbsp;亩
                        </td>
                      </tr>
                    </table>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="（土地）备注" prop="landRemark">
                  <el-input
                    v-model="form.landRemark"
                    style="width: 96%"
                    autosize
                    type="textarea"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="项目总拆迁数" prop="proTear">
                  <el-input
                    v-model="form.proTear"
                    oninput="value=value.replace(/[^\d]/g,'')"
                    style="width: 50%"
                    size="mini"
                  ></el-input
                  >&nbsp;户
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="已拆迁户数" prop="alreadyTear">
                  <el-input
                    v-model="form.alreadyTear"
                    oninput="value=value.replace(/[^\d]/g,'')"
                    style="width: 50%"
                    size="mini"
                  ></el-input
                  >&nbsp;户
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="项目总征地数" prop="landAcq">
                  <el-input
                    v-model="form.landAcq"
                    oninput="value=value.replace(/[^\d]/g,'')"
                    style="width: 50%"
                    size="mini"
                  ></el-input
                  >&nbsp;亩
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="已征地数" prop="alreadyAcq">
                  <el-input
                    v-model="form.alreadyAcq"
                    oninput="value=value.replace(/[^\d]/g,'')"
                    style="width: 50%"
                    size="mini"
                  ></el-input
                  >&nbsp;亩
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="十四五计划拆迁数" prop="planTear">
                  <el-input
                    v-model="form.planTear"
                    oninput="value=value.replace(/[^\d]/g,'')"
                    style="width: 50%"
                    size="mini"
                  ></el-input
                  >&nbsp;户
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="十四五计划征地数" prop="planLand">
                  <el-input
                    v-model="form.planLand"
                    oninput="value=value.replace(/[^\d]/g,'')"
                    style="width: 50%"
                    size="mini"
                  ></el-input
                  >&nbsp;亩
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="row_Css">
              <el-col :span="24">
                <el-form-item label="项目备注" prop="proRemark">
                  <el-input
                    v-model="form.proRemark"
                    style="width: 96%"
                    autosize
                    type="textarea"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="附件" prop="files">
                  <el-upload
                    class="upload-demo"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    multiple
                    :limit="3"
                    :on-exceed="handleExceed"
                    :file-list="fileList"
                    action=""
                    ref="upload"
                    :http-request="uploadExcel"
                    auto-upload="true"
                  >
                    <el-button size="small" type="primary">添加附件 </el-button>
                    <span style="margin-left: 20px; font-weight: 400"
                      >(一次可选择五个文件上传,每个文件限制20M以内)</span
                    >
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="Excel文件导入" prop="files">
                  <el-upload
                    class="upload-demo"
                    drag="true"
                    action=""
                    multiple
                    ref="upload"
                    :http-request="uploadExcel"
                    :limit="1"
                    auto-upload="true"
                  >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">
                      将文件拖到此处，或<em>点击增加材料</em>
                    </div>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <!-- 按钮 -->
      <div class="ButtonForm">
        <el-button size="mini" type="primary" @click="saveOrUpdate"
          >提交</el-button
        >
        <el-button size="mini" @click="resetForm('refForm','refForm2','refForm3')" type="danger"
          >清空
        </el-button>
      </div>
    </div>
  </div>
</template>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
export default {
  name: "Newone",
  data() {
    return {
      dialogTableVisible: false,
      optiondq: [
        {
          value: "选项1",
          label: "项目申报",
        },
        {
          value: "选项2",
          label: "项目建议书",
        },
        {
          value: "选项3",
          label: "可研",
        },
        {
          value: "选项4",
          label: "方案设计",
        },
        {
          value: "选项5",
          label: "初步设计",
        },
        {
          value: "选项6",
          label: "施工图设计",
        },
        {
          value: "选项7",
          label: "招投标",
        },
        {
          value: "选项8",
          label: "施工",
        },
      ],
      // submit_img: require('../../../../assets/imgs/组 422.png'),
      // delete_img: require('../../../../assets/imgs/组 423.png'),
      labelPosition: "left",
      proType: 1,
      fileList: [],
      form: {
        buildNature: "",
        proTypeOne: "",
      },
      files: "",
      proId: "",

      options1: [
        {
          value: "1",
          label: "发展平台",
        },
        {
          value: "2",
          label: "转型升级",
        },
        {
          value: "3",
          label: "基础设施",
        },
        {
          value: "4",
          label: "城乡统筹",
        },
        {
          value: "5",
          label: "生态文明",
        },
        {
          value: "6",
          label: "社会事业",
        },
        {
          value: "7",
          label: "民生保障",
        },
      ],
      options2: [],
    };
  },
  created() {},
  methods: {
    //   清空
    resetForm(refForm,refForm2,refForm3) {
      this.$refs[refForm].resetFields();
      this.$refs[refForm2].resetFields();
      this.$refs[refForm3].resetFields();
      this.form.endTime = "";
      this.form.city = "";
      this.form.townFinance = "";
      this.form.townFinancing = "";
      this.form.companyFinancing = "";
      this.form.subsidy = "";
      this.form.other = "";
      this.form.totalInvestment = "";

      this.form.buildLand = "";
      this.form.unusedLand = "";
      this.form.conAgtLand = "";
      this.form.ringLand = "";
      this.form.totalLand = "";
      this.form.arableLand = "";
      this.form.agrLand = "";
    },
    ///proInquire/planDec/delete/{id}
    //阻止upload的自己上传，进行再操作
    beforeupload(file) {
      console.log(file);
      //创建临时的路径来展示图片
      var windowURL = window.URL || window.webkitURL;
      this.src = windowURL.createObjectURL(file);
      //重新写一个表单上传的方法
      this.param = new FormData();
      this.param.append("file", file);
      return false;
    },
    uploadFile(param) {
      this.fileList.push(param.file);
    },
    uploadExcel(param) {
      this.$uploadDetailsFiles(param.file).then((res) => {
        this.form = res.data;
        this.form.proTypeOne = parseInt(res.data.proTypeOne);
        this.form.proTypeTwo = parseInt(res.data.proTypeTwo);
        this.form.proTypeNata = parseInt(res.data.proTypeNata);
        this.form.proLabel = parseInt(res.data.proLabel);
      });
    },
    // 保存
    saveOrUpdate(param) {
      // 原来的规划类保存接口;
      // let params = this.form;
      // params.files = this.files;
      // let proType = this.proType;
      // this.form.proType = proType;
      // console.log("123456");
      // this.$post("/proInquire/planDec/save", params).then((res) => {
      //   if (res.code == 2000) {
      //     this.$message.success("保存成功!");
      //   } else if (res.code == 4000) {
      //     this.$message.error(res.message);
      //   }
      // });

      // 图片上传接口保存
      let proType = this.proType;
      this.form.proType = proType;
      this.$upload(this.fileList, this.form).then((res) => {
        if (res.code == 2000) {
          this.$message.success("保存成功!");
          //清空
          this.resetForm()
        } else if (res.code == 4000) {
          this.$message.error(res.message);
        }
      });
    },
    // 读取上传文件
    handlePreview(file) {
      window.open(file.fileUrl);
    },
    // 上传成功的回调函数
    uploadSuccess(res, file, fileList) {
      this.fileList = file.raw;
      console.log(this.fileList);
    },
    // 上传失败的回调函数
    uploadError(res, file, fileList) {
      console.log(fileList);
      this.$message.error(`文件：${file.name}上传失败！`);
    },
    // 验证是否为数字
    num(serialNumber) {
      var numReg = /^[0-9]*$/;
      var numRe = new RegExp(numReg);
      if (!numRe.test(serialNumber)) {
        return false;
      }
    },
    deleteplanning() {
      let params = {};
      this.serch();
      this.$post("proInquire/planDec/delete/?id=", params).then((res) => {
        this.$message.success("删除成功!");
      });
    },
    // 附件
    trigger() {
      this.$refs.fileBtn.dispatchEvent(new MouseEvent("click"));
    },

    handleRemove(file, fileList) {
      this.fileList = fileList;
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },

    oneOptions(val) {
      if (val == 1) {
        this.options2 = [
          {
            value: "1",
            label: "平台建设",
          },
          {
            value: "2",
            label: "产业聚集",
          },
          {
            value: "3",
            label: "服务业聚集",
          },
        ];
      } else if (val == 2) {
        this.options2 = [
          {
            value: "1",
            label: "传统产业改造提升",
          },
          {
            value: "2",
            label: "现代服务业",
          },
          {
            value: "3",
            label: "新兴产业",
          },
          {
            value: "4",
            label: "精品(特色)农业.林业",
          },
        ];
      } else if (val == 3) {
        this.options2 = [
          {
            value: "1",
            label: "综合交通",
          },
          {
            value: "2",
            label: "能源保障",
          },
          {
            value: "3",
            label: "水利建设",
          },
        ];
      } else if (val == 4) {
        this.options2 = [
          {
            value: "1",
            label: "城镇基础设施",
          },
          {
            value: "2",
            label: "新城建设",
          },
          {
            value: "3",
            label: "小城市培育",
          },
          {
            value: "4",
            label: "中心镇.中心村建设",
          },
        ];
      } else if (val == 5) {
        this.options2 = [];
      } else if (val == 6) {
        this.options2 = [];
      } else if (val == 7) {
        this.options2 = [];
      }
    },
    //失去焦点事件计算总价
    onInputBlur() {
      // let total = 0
      // let city = parseInt(this.form.city);
      // let subsidy = parseInt(this.form.subsidy);
      // let townFinance = parseInt(this.form.townFinance);
      // let townFinancing = parseInt(this.form.townFinancing);
      // let companyFinancing = parseInt(this.form.companyFinancing);
      // let other = parseInt(this.form.other);
      // total = city + subsidy + townFinance + townFinancing + companyFinancing + other;
      // this.form.totalInvestment = total
      // this.form.totalInvest = total
      let total = 0;
      let city = this.form.city ? parseFloat(this.form.city) : 0;
      let subsidy = this.form.subsidy ? parseFloat(this.form.subsidy) : 0;
      let townFinance = this.form.townFinance
        ? parseFloat(this.form.townFinance)
        : 0;
      let townFinancing = this.form.townFinancing
        ? parseFloat(this.form.townFinancing)
        : 0;
      let companyFinancing = this.form.companyFinancing
        ? parseFloat(this.form.companyFinancing)
        : 0;
      let other = this.form.other ? parseFloat(this.form.other) : 0;
      total =
        city + subsidy + townFinance + townFinancing + companyFinancing + other;
      this.form.totalInvestment = total;
    },
    //失去焦点事件
    onInputBlurland() {
      let total = 0;
      let buildLand = this.form.buildLand ? parseFloat(this.form.buildLand) : 0;
      let unusedLand = this.form.unusedLand
        ? parseFloat(this.form.unusedLand)
        : 0;
      let ringLand = this.form.ringLand ? parseFloat(this.form.ringLand) : 0;
      let agrLand = this.form.agrLand ? parseFloat(this.form.agrLand) : 0;
      let conAgtLand = this.form.conAgtLand
        ? parseFloat(this.form.conAgtLand)
        : 0;
      let arableLand = this.form.arableLand
        ? parseFloat(this.form.arableLand)
        : 0;
      total =
        buildLand + unusedLand + ringLand + agrLand + conAgtLand + arableLand;
      this.form.totalLand = total;
    },
    //导入数据
    importdata() {
      let form = {};
      let param = {};
      param.type = this.proType;
      this.$post("/proInquire/planDec/auto", param).then((res) => {
        let item = res.data;
        //市财政
        form.city = parseFloat(item.a);
        //乡镇街道财政
        form.townFinance = parseFloat(item.b);
        //乡镇街道融资
        form.townFinancing = parseFloat(item.c);

        //公司融资
        form.companyFinancing = parseFloat(item.d);
        //争取市级以上补助
        form.subsidy = parseFloat(item.e);
        // 其他
        form.other = parseFloat(item.f);
        // 总计
        form.totalInvestment =
          parseFloat(item.a) +
          parseFloat(item.b) +
          parseFloat(item.c) +
          parseFloat(item.d) +
          parseFloat(item.e) +
          parseFloat(item.f);

        // 允许建设区农用地
        form.agrLand = item.h;
        //建设用地
        form.buildLand = item.i;
        //未利用地
        form.unusedLand = item.j;
        //有条件建设区农用地
        form.conAgtLand = item.k;
        // 圈外用地
        form.ringLand = item.l;
        //
        form.arableLand = item.m;
        // 总用地
        form.totalLand =
          parseFloat(item.h) +
          parseFloat(item.i) +
          parseFloat(item.j) +
          parseFloat(item.k) +
          parseFloat(item.l) +
          parseFloat(item.m);
        this.form = form;
      });
    },
  },

  mounted() {
    this.changeLayout(2);
    this.importdata();
  },
  destroyed() {
    this.changeLayout(1);
  },
};
</script>
<style lang="less" scoped>
.DivFrom {
  width: 100%;
  background-color: rgb(248, 248, 248);
  box-sizing: border-box;
  border-radius: 10px;
  border: none;
  //   background-color: aqua;
  box-sizing: border-box;
  padding: 50px;
  z-index: 99;
}
.button_css4 {
  height: 75px;
  width: 170px;
  border-radius: 5px;
  background-size: cover;
  background-repeat: no-repeat;
  cursor: pointer;
}
/* 输入框样式 */
/deep/.el-input--small .el-input__inner {
  background: #ffffff;
  border: 1px solid #2e8ccc;
}
.input_css {
  height: 30px !important;
  line-height: 30px;
  background: #ffffff;
  border: 1px solid #2e8ccc;
}
/deep/.el-textarea__inner {
  background: #ffffff;
  border: 1px solid #2e8ccc;
  height: 70px !important;
}
.fontStyle {
  font-size: 20px;
  font-family: "微软雅黑";
  color: #2e8ccc;
  font-weight: 600;
}
.el-divider--horizontal {
  margin: 10px 0;
  background-color: #2e8ccc;
  height: 2px;
  margin-bottom: 10px;
}
.row_Css {
  font-size: 18px;
  font-family: "微软雅黑";
  color: #000;
  font-weight: 600;
}
/* /deep/ .el-upload {
    width: 80px;
    height: 50px;
    line-height: 50px;
    border: none;
} */
.my-button1 {
  background-color: #94c9d8;
  height: 50px;
  border-radius: 8px;
  margin: 10px;
  color: #fff;
  text-align: center;
  box-shadow: #04040421 0px 0px 8px 3px;
}
.my-button2 {
  background-color: #fff;
  height: 50px;
  border-radius: 8px;
  margin: 10px;
  color: #94c9d8;
  text-align: center;
  box-shadow: #04040421 0px 0px 8px 3px;
}
.button-font {
  font-size: 16px;
  line-height: 46px;
}
.top_box {
  font-size: 15px;
  color: black;
  margin-top: 20px;
}
/* /deep/.el-breadcrumb__inner {
    color: #fff;
}
/deep/.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link {
    font-weight: 700;
    text-decoration: none;
    -webkit-transition: color .2s cubic-bezier(.645,.045,.355,1);
    transition: color .2s cubic-bezier(.645,.045,.355,1);
    color: #fff;
}
/deep/.el-breadcrumb__item:last-child .el-breadcrumb__inner, .el-breadcrumb__item:last-child .el-breadcrumb__inner a, .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover, .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
    font-weight: 400;
    color: #fff;
    cursor: text;
} */

/deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item {
  width: 180px;
  height: 50px;
  background-color: rgb(199, 226, 243);
  text-align: center;
  border-radius: 5px;
  margin-right: 10px;
  line-height: 50px;
  font-size: 12px;
}
/deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  width: 180px;
  height: 50px;
  background-color: rgb(3, 89, 137);
  color: white;
  border-radius: 5px;
}

/deep/.el-tabs--border-card > .el-tabs__content {
  padding: 10px 0 0 0;
}
/deep/.el-input--mini .el-input__inner {
  width: 100%;
  height: 30px;
}
/deep/.el-input__inner {
  border: 1px solid rgb(74, 155, 210);
  outline: none;
}
/deep/.el-form-item {
  font-weight: 900;
  font-size: 16px;
}
/deep/.el-form-item__label {
  color: black;
}
/deep/.el-textarea .el-textarea__inner {
  border: 1px solid rgb(74, 155, 210);
  outline: none;
  height: 60px;
}
/deep/.el-tabs__item .is-top {
  width: 300px;
}

/deep/.el-tabs__item {
  padding: 0;
}
/deep/.el-tabs__item:nth-child(2) {
  box-sizing: border-box;
  padding-right: 50px;
}
/deep/.el-tabs__nav-scroll {
  background-color: rgb(248, 248, 248);
}
.input_css {
  width: 30%;
  height: 30px;
}
/deep/.el-radio-group {
  background-color: white;
}
/deep/.el-form-item__label:nth-child(10) {
  width: 20% !important;
  background-color: tomato;
}
.ButtonForm {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  .el-button {
    width: 80px;
    font-size: 12px;
    border: none;
  }
  .el-button:nth-child(1) {
    background-color: rgb(46, 140, 204);
  }
  .el-button:nth-child(2) {
    background-color: rgb(255, 0, 0);
  }
}
/deep/.el-tabs--border-card {
  background-color: rgb(248, 248, 248);
}
/deep/.el-table--border::after,
.el-table--group::after,
.el-table::before {
  z-index: -1 !important;
}
</style>